<template>
    <div>
        <el-dialog
          title="订单状态"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose">
          <el-steps :active="active" align-center>
            <el-step title="待取货" description="司机还未取货"></el-step>
            <el-step title="到达取货点" description="司机已到达取货点准备取货"></el-step>
            <el-step title="运输中" description="订单正在运输中"></el-step>
            <el-step title="已送达" description="订单已送达"></el-step>
            <el-step title="已上传回执单" description="司机已经上传回执请及时处理"></el-step>
          </el-steps>
        </el-dialog>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="shipperProjectName"
              fixed
              width="200"
              label="项目名称">
            </el-table-column>
            <el-table-column
              prop="start"
              width="150"
              label="起始地">
            </el-table-column>
            <el-table-column
              prop="end"
              width="150"
              label="目的地">
            </el-table-column>
            <el-table-column
              prop="itemType"
              width="120"
              label="货物类型">
            </el-table-column>
            <el-table-column
              prop="remark"
              width="280"
              label="备注">
            </el-table-column>
            <el-table-column
              prop="shipperLinkMan"
              width="130"
              label="发货方联系人">
            </el-table-column>
            <el-table-column
              prop="shipperPhone"
              width="180"
              label="发货方联系电话">
            </el-table-column>
            <el-table-column
              prop="shippingAddress"
              width="260"
              label="发货地址">
            </el-table-column>
            <el-table-column
              prop="shipperCustomerCode"
              width="150"
              label="客户编码">
            </el-table-column>
            <el-table-column
              prop="consigneeLinkMan"
              width="130"
              label="收货方联系人">
            </el-table-column>
            <el-table-column
              prop="consigneePhone"
              width="180"
              label="收货方联系电话">
            </el-table-column>
            <el-table-column
              prop="deliveryAddress"
              width="260"
              label="收货地址">
            </el-table-column>
            <el-table-column
              prop="name"
              width="130"
              label="分配的司机">
            </el-table-column>
            <el-table-column
              prop="phone"
              width="180"
              label="联系方式">
            </el-table-column>
            <el-table-column
              prop="exp"
              width="180"
              label="驾照到期时间">
            </el-table-column>
            <el-table-column
              prop="type"
              width="120"
              label="证件类型">
            </el-table-column>
            <el-table-column
              fixed="right"
              width="130"
              label="操作">
              <template slot-scope="scope">
                 <el-button type="text" @click="open(scope.row)">查看订单状态</el-button>
              </template>   
            </el-table-column>
          </el-table>
          <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
         </el-pagination>
    </div>
</template>

<script>
    import request from '../../../utils/request.js'
     export default {
        data() {
          return {
            tableData: [],
            current:1,
            size:10,
            total:0,
            dialogVisible: false,
            active:0
          }
        },
        methods:{
            handleSizeChange(val) {
                this.size = val;
                this.load();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.load();
            },
            load() {
                request.get("/order/getOrderIsShipping?current=" + this.current + "&size=" + this.size).then(res=>{
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            handleClose() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible = false;
              })
            },
            open(val) {
                this.dialogVisible = true;
                request.get("/orderStatus/getOrderStatus?id=" + val.id).then(res=>{
                    if (res.code == 200) {
                        this.active = res.data.status + 1;
                    }
                })
            }
        },
        mounted() {
            this.load();
        }
      }
</script>

<style>
</style>
